<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮工具栏</title>
</head>
<style>
	  .box{
	  	display:flex;
        float:left;
        margin-left:10px;
	  }
	  .box button{
	  	display:block;
	  	padding:10px;
	  	background-color:#fff;
	  	border:1px solid #ccc;
	  	border-right:0;
	  }
		.box button:first-child{
			border-radius: 5px 0 0 5px;
		}
		.box button:last-child{
			border-radius:0 5px 5px 0;
			border-right:1px solid #ccc;
		}
		.box1{
			display:flex;
		    float:left;
		    margin-left:10px;
		}
		.box1 button{
			display:block;
		  	padding:10px;
		  	background-color:#fff;
		  	border:1px solid #ccc;
			border-radius:5px;
			border-right:1px solid #ccc;
		}
</style>
<body>
	  <div class="box">
           <button>1</button>
           <button>2</button>
           <button>3</button>
           <button>4</button>
	  </div>
	  <div class="box">
           <button>5</button>
           <button>6</button>
           <button>7</button>
	  </div>
	  <div class="box1">
	  	<button>8</button>
	  </div>
</body>
</html>